<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>德育教育</title>
    <script type="text/javascript" src="../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../static/js/script.js"></script>
    <script type="text/javascript" src="../static/js/template.js"></script>
    <link rel="stylesheet" href="../static/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../static/css/style.css">
    <style>
        .headerbs{
            box-shadow:  0 8px 6px -6px #ddd;
        }
        .active{
            color:#4FA9C5;
            font-weight: bold;
        }
        .maincontent{
            margin-top: 70px;
            padding-bottom: 70px;
        }
        .subtitle{
            width: 60%;
            padding: 60px 0;
            margin: 0 auto;
            align-items: center;
            display: flex;
            justify-content: space-between;
        }
        .items{
            font-size: 30px;
            color:#444;
            cursor: pointer;
            font-family: serif;
        }
        .itemactive{
            background: #9EBF3C;
            color: #FFF;
            padding: 5px 25px;
            border-radius: 25px;
        }
        .category{
            background: #F0F0F0;
            display: flex;
            padding: 10px 30px;
        }
        .ctitle{
            padding: 15px 0;
            flex: 1;
        }
        .clist{
            display: flex;
            flex-wrap: wrap;
            flex: 6;
        }
        .clist div{
            color: #C4C4C4;
            padding: 10px 0;
            width: 25%;
            cursor: pointer;
        }
        .qa,.livebox{
            display: none;
        }
        .videolist,.livelist{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: 20px;
        }
        .videoitem{
            width: 23.5%;
            margin: 10px 0;
            cursor: pointer;
        }
        .liveitem{
            width: 32%;
            margin: 10px 0;
            cursor: pointer;
        }
        .videocover,.livecover{
            background-image: url("../static/img/i8.png");
            position: relative;
            height: 0;
            overflow: hidden;
            margin: 0;
            padding-bottom: 175px;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }
        .livecover{
            background-image: url("../static/img/i9.png") !important;
            padding-bottom: 240px !important;
        }
        .videoinfo,.liveinfo{
            line-height: 27px;
            border: 1px solid #DCDCDC;
            border-top: 0;
            padding: 5px 15px;
        }
        .vtitle,.ltitle{
            color:#575757
        }
        .vdesc,.ldesc{
            color:#777;
            font-size: 15px;
            display: flex;
            justify-content: space-between;
        }
        .nostart{
            padding: 0px 10px;
            background: #ACABAB;
            color: #eee;
            border-radius: 3px;
            font-size: 12px;
        }
        .living{
            background: #8F6849;
            color:#FFF;
            font-size: 12px;
            padding: 0px 10px;
            border-radius: 3px;
        }
        .fa-play-circle-o{
            font-size: 20px;
        }
        .qa{
            margin-top: 20px;
        }
        .qaitem{
            margin: 20px 0;
        }
        .qaanswer{
            font-size: 14px;
            color:#777;
        }
        .qatitle{
            padding: 10px 0;
            color:#444;
            font-size: 17px;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="header headerbs">
        <div class="glogo"></div>
        <div class="nav">
            <div onclick="window.location.href='../index/index.html?type=index'">首页</div>
            <div onclick="window.location.href='../resources/index.html?type=online'">资源在线</div>
            <div onclick="window.location.href='../headmaster/index.html?type=teacher'">班主任工作</div>
            <div class="active">德育讲堂</div>
            <div onclick="window.location.href='../activity/index.html?type=activity'">活动专区</div>
        </div>
    </div>
    <div class="maincontent">
        <div class="subtitle">
            <div class="items itemactive" data-type="video">精彩课堂</div>
            <div class="items" data-type="live">在线直播</div>
            <div class="items" data-type="qa">问答连线</div>
        </div>
        <div class="category">
            <div class="ctitle">全部视频</div>
            <div class="clist">
                <div>爱国</div>
                <div>环保</div>
                <div>环保</div>
                <div>环保</div>
                <div>环保</div>
                <div>环保</div>
                <div>环保</div>
            </div>
        </div>
        <!-- 模块内容区域 -->
        <div class="boxcontent">
            <!--精彩课堂视频列表-->
           <div class="videobox">
               <div class="videolist">
                   <div class="videoitem">
                       <div class="videocover">&nbsp;</div>
                       <div class="videoinfo">
                           <p class="vtitle outline1">视频标题单行显示</p>
                           <p class="vdesc outline1"><span>视频简介</span><span><i class="fa fa-play-circle-o"></i></span></p>
                       </div>
                   </div>
                   <div class="videoitem">
                       <div class="videocover">&nbsp;</div>
                       <div class="videoinfo">
                           <p class="vtitle outline1">视频标题单行显示</p>
                           <p class="vdesc outline1"><span>视频简介</span><span><i class="fa fa-play-circle-o"></i></span></p>
                       </div>
                   </div>
                   <div class="videoitem">
                       <div class="videocover">&nbsp;</div>
                       <div class="videoinfo">
                           <p class="vtitle outline1">视频标题单行显示</p>
                           <p class="vdesc outline1"><span>视频简介</span><span><i class="fa fa-play-circle-o"></i></span></p>
                       </div>
                   </div>
                   <div class="videoitem">
                       <div class="videocover">&nbsp;</div>
                       <div class="videoinfo">
                           <p class="vtitle outline1">视频标题单行显示</p>
                           <p class="vdesc outline1"><span>视频简介</span><span><i class="fa fa-play-circle-o"></i></span></p>
                       </div>
                   </div>
                   <div class="videoitem">
                       <div class="videocover">&nbsp;</div>
                       <div class="videoinfo">
                           <p class="vtitle outline1">视频标题单行显示</p>
                           <p class="vdesc outline1"><span>视频简介</span><span><i class="fa fa-play-circle-o"></i></span></p>
                       </div>
                   </div>
                   <div class="videoitem">
                       <div class="videocover">&nbsp;</div>
                       <div class="videoinfo">
                           <p class="vtitle outline1">视频标题单行显示</p>
                           <p class="vdesc outline1"><span>视频简介</span><span><i class="fa fa-play-circle-o"></i></span></p>
                       </div>
                   </div>
                   <div class="videoitem">
                       <div class="videocover">&nbsp;</div>
                       <div class="videoinfo">
                           <p class="vtitle outline1">视频标题单行显示</p>
                           <p class="vdesc outline1"><span>视频简介</span><span><i class="fa fa-play-circle-o"></i></span></p>
                       </div>
                   </div>
                   <div class="videoitem">
                       <div class="videocover">&nbsp;</div>
                       <div class="videoinfo">
                           <p class="vtitle outline1">视频标题单行显示</p>
                           <p class="vdesc outline1"><span>视频简介</span><span><i class="fa fa-play-circle-o"></i></span></p>
                       </div>
                   </div>
                   <div class="videoitem">
                       <div class="videocover">&nbsp;</div>
                       <div class="videoinfo">
                           <p class="vtitle outline1">视频标题单行显示</p>
                           <p class="vdesc outline1"><span>视频简介</span><span><i class="fa fa-play-circle-o"></i></span></p>
                       </div>
                   </div>
                   <div class="videoitem">
                       <div class="videocover">&nbsp;</div>
                       <div class="videoinfo">
                           <p class="vtitle outline1">视频标题单行显示</p>
                           <p class="vdesc outline1"><span>视频简介</span><span><i class="fa fa-play-circle-o"></i></span></p>
                       </div>
                   </div>
                   <div class="videoitem">
                       <div class="videocover">&nbsp;</div>
                       <div class="videoinfo">
                           <p class="vtitle outline1">视频标题单行显示</p>
                           <p class="vdesc outline1"><span>视频简介</span><span><i class="fa fa-play-circle-o"></i></span></p>
                       </div>
                   </div>
                   <div class="videoitem">
                       <div class="videocover">&nbsp;</div>
                       <div class="videoinfo">
                           <p class="vtitle outline1">视频标题单行显示</p>
                           <p class="vdesc outline1"><span>视频简介</span><span><i class="fa fa-play-circle-o"></i></span></p>
                       </div>
                   </div>

               </div>
           </div>
            <!--在线直播-->
           <div class="livebox">
               <div class="livelist">
                   <div class="liveitem">
                       <div class="livecover">&nbsp;</div>
                       <div class="liveinfo">
                           <p class="ltitle outline1">视频标题单行显示</p>
                           <p class="ldesc outline1"><span>直播时间：2020-02-20 10:00</span><span class="nostart">尚未开始</span></p>
                       </div>
                   </div>
                   <div class="liveitem">
                       <div class="livecover">&nbsp;</div>
                       <div class="liveinfo">
                           <p class="ltitle outline1">视频标题单行显示</p>
                           <p class="ldesc outline1"><span>直播时间：2020-02-20 10:00</span><span class="nostart">尚未开始</span></p>
                       </div>
                   </div>
                   <div class="liveitem">
                       <div class="livecover">&nbsp;</div>
                       <div class="liveinfo">
                           <p class="ltitle outline1">视频标题单行显示</p>
                           <p class="ldesc outline1"><span>直播时间：2020-02-20 10:00</span><span class="nostart">尚未开始</span></p>
                       </div>
                   </div>
                   <div class="liveitem">
                       <div class="livecover">&nbsp;</div>
                       <div class="liveinfo">
                           <p class="ltitle outline1">视频标题单行显示</p>
                           <p class="ldesc outline1"><span>直播时间：2020-02-20 10:00</span><span class="living">正在直播</span></p>
                       </div>
                   </div>
                   <div class="liveitem">
                       <div class="livecover">&nbsp;</div>
                       <div class="liveinfo">
                           <p class="ltitle outline1">视频标题单行显示</p>
                           <p class="ldesc outline1"><span>直播时间：2020-02-20 10:00</span><span class="living">正在直播</span></p>
                       </div>
                   </div>
                   <div class="liveitem">
                       <div class="livecover">&nbsp;</div>
                       <div class="liveinfo">
                           <p class="ltitle outline1">视频标题单行显示</p>
                           <p class="ldesc outline1"><span>直播时间：2020-02-20 10:00</span><span class="living">正在直播</span></p>
                       </div>
                   </div>

               </div>
           </div>
            <!--问答连线-->
            <div class="qa">
                <div class="qaitem">
                    <p class="qatitle">1、常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题1</p>
                    <p class="qaanswer">常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题1常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题1</p>
                </div>
                <div class="qaitem">
                    <p class="qatitle">1、常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题1</p>
                    <p class="qaanswer">常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题1常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题1</p>
                </div>
                <div class="qaitem">
                    <p class="qatitle">1、常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题1</p>
                    <p class="qaanswer">常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题1常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题1</p>
                </div>
                <div class="qaitem">
                    <p class="qatitle">1、常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题1</p>
                    <p class="qaanswer">常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题1常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题1</p>
                </div>
                <div class="qaitem">
                    <p class="qatitle">1、常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题1</p>
                    <p class="qaanswer">常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题1常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题1</p>
                </div>
                <div class="qaitem">
                    <p class="qatitle">1、常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题1</p>
                    <p class="qaanswer">常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题1常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题1</p>
                </div>
                <div class="qaitem">
                    <p class="qatitle">1、常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题1</p>
                    <p class="qaanswer">常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题1常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题1</p>
                </div>
                <div class="qaitem">
                    <p class="qatitle">1、常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题1</p>
                    <p class="qaanswer">常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题1常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题1</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <p>主办单位:央馆德育资源服务平台&nbsp;&nbsp;&nbsp;&nbsp;协办单位:安徽安教德育资源服务平台</p>
    <p>COPYRIGHT2020 YANGGUANG. ALL RIGHTS RESERVED.</p>
</div>
</body>
</html>

<script>
    $(function(){
        $(".items").click(function () {
           var t = $(this).data('type');
           if(t == 'video'){
               $(".category").show();
               $(".videobox").show();
               $(".livebox").hide();
               $(".qa").hide();
           }else if(t == 'live'){
               $(".category").hide();
               $(".videobox").hide();
               $(".livebox").show();
               $(".qa").hide();
           }else {
               $(".category").hide();
               $(".videobox").hide();
               $(".livebox").hide();
               $(".qa").show();
           }
           $(".items").removeClass('itemactive') ;
           $(this).addClass('itemactive') ;
        });

        $(".videoitem").click(function(){
            window.location.href="./detail.html?title=植树活动正在直播";
        });
    });
</script>